<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <meta name="page-help" content="https://getrebuild.com/docs/dev/how-use-apis" />
    <title>[[${bundle.L('API 密钥')}]]</title>
    <style>
      .logs {
        padding: 25px 20px;
      }
      .logs-list {
        border-right: 1px solid rgba(0, 0, 0, 0.125);
      }
      .logs-list .list-group-item {
        padding: 6px 8px;
      }
      .logs-list .list-group-item.active > div {
        color: #fff;
      }
      .logs-list .list-group-item.active > div > .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
      }
      .logs-list .list-group-item:first-child {
        border-top-width: 0;
      }
      .logs-detail {
        position: sticky;
        top: 20px;
      }
      .logs-detail dt {
        margin-bottom: 10px;
        font-weight: normal;
        color: #666;
      }
      .logs-detail dd {
        color: #222;
      }
      .search-logs > input {
        appearance: none !important;
        outline: none !important;
        border: 0 none;
        padding: 6px 8px;
        width: 100%;
        border-radius: 2px;
        display: block;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
        line-height: 1;
      }
      .search-logs > input:focus {
        background-color: #eee;
      }
      .search-logs > em {
        font-size: 1.2rem;
        position: absolute;
        top: 7px;
        right: 6px;
        color: #aaa;
      }
    </style>
  </head>
  <body>
    <div class="rb-wrapper rb-fixed-sidebar rb-collapsible-sidebar rb-collapsible-sidebar-hide-logo rb-color-header" th:classappend="${sideCollapsedClazz}">
      <th:block th:replace="~{/_include/nav-top}" />
      <th:block th:replace="~{/_include/nav-left-admin(active='apis-manager')}" />
      <div class="rb-content">
        <div class="page-head">
          <div class="float-left"><div class="page-head-title">[[${bundle.L('API 密钥')}]]</div></div>
          <div class="float-right pt-1">
            <button class="btn btn-primary J_add" type="button"><i class="icon zmdi zmdi-plus"></i> [[${bundle.L('添加')}]]</button>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="main-content container-fluid pt-0">
          <div class="card card-table">
            <div class="card-body">
              <div class="dataTables_wrapper container-fluid">
                <div class="row rb-datatable-body">
                  <div class="col-sm-12">
                    <div class="rb-loading rb-loading-active data-list">
                      <table class="table table-hover table-striped table-fixed">
                        <thead>
                          <tr>
                            <th width="12%">APP ID</th>
                            <th>APP SECRET</th>
                            <th width="12%">[[${bundle.L('绑定用户 (权限)')}]]</th>
                            <th>[[${bundle.L('IP 白名单')}]]</th>
                            <th width="12%">[[${bundle.L('调用量')}]] ([[${bundle.L('90天')}]])</th>
                            <th width="120">[[${bundle.L('创建时间')}]]</th>
                            <th width="120"></th>
                          </tr>
                        </thead>
                        <tbody id="appList"></tbody>
                      </table>
                      <th:block th:replace="~{/_include/spinner}" />
                      <div class="list-nodata hide">
                        <span class="mdi mdi-api"></span>
                        <p>[[${bundle.L('暂无 API 密钥')}]]</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="pagination">
                  <div class="row rb-datatable-footer">
                    <div class="col-sm-3"><div class="dataTables_info"></div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script th:src="@{/assets/js/admin/config-comps.js}" type="text/babel"></script>
    <script th:src="@{/assets/js/admin/apis-manager.js}" type="text/babel"></script>
    <script th:src="@{/assets/lib/prettier/standalone.js}"></script>
    <script th:src="@{/assets/lib/prettier/parser-babel.js}"></script>
    <script th:src="@{/assets/lib/clipboard.min.js}"></script>
  </body>
</html>
